<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/index.css" />
  <title>12进12出</title>
</head>

<body>
  <!-- <script type="module" src="../js/horn_button.js"></script> -->


  <!-- 导航栏 -->
  <nav>
    <div id="nav_left">
      <img src="../resources/logo.png" loading="lazy" />
      <ul>
        <li><a href="#" class="nav_a magnify-div box-shadow warning" id="nav_link"><img src="../resources/icon_link.png"
              class="icon" /><span class="label">Not Linked</span></a></li>
        <li><a href="#" class="nav_a magnify-div box-shadow" id="nav_setup"><img src="../resources/icon_setup.png"
              class="icon" /><span class="label">Setup</span><img src="../resources/arrow_down.png"
              class="icon_arrow" /></a></li>
        <li><a href="#" class="nav_a magnify-div box-shadow" id="nav_save"><img src="../resources/icon_save.png"
              class="icon" /><span class="label">Save</span><img src="../resources/arrow_down.png"
              class="icon_arrow" /></a></li>
        <li><a href="#" class="nav_a magnify-div box-shadow" id="nav_load"><img src="../resources/icon_load.png"
              class="icon" /><span class="label">Load</span><img src="../resources/arrow_down.png"
              class="icon_arrow" /></a></li>
        <li><a href="#" class="nav_a magnify-div box-shadow" id="nav_bypass"><img src="../resources/icon_bypass.png"
              class="icon" /><span class="label">Bypass</span></a></li>
        <li><a href="#" class="nav_a magnify-div box-shadow" id="nav_resetEQ"><img src="../resources/icon_reset.png"
              class="icon" /><span class="label">ResetEQ</span><img src="../resources/arrow_down.png"
              class="icon_arrow" /></a></li>
        <li><a href="#" class="nav_a magnify-div box-shadow" id="nav_noise" style="display: none;"><img
              src="../resources/icon_reset.png" class="icon" /><span class="label">Noise</span><img
              src="../resources/arrow_down.png" class="icon_arrow" /></a></li>
      </ul>
    </div>
    <div id="nav_right">
      <button class="magnify-div box-shadow half-radius gradient-button" style="display: none;" id="btn_person"><img
          src="../resources/person_off.png" /></button>
      <button class="magnify-div box-shadow half-radius gradient-button" style="display: none;" id="btn_setting"><img
          src="../resources/setting_off.png" /></button>
    </div>
  </nav>

  <!-- 内容 -->
  <div id="content_div">

    <!-- 曲线图 -->
    <div class="bg_gray_div" id="bg_char_div"> </div>

    <!-- 控制eq -->
    <div class="bg_gray_div" id="bg_eq_div">
      <div id="bg_eq_title">
        <span style="font-size: 24px;">EQ</span>
        <span>12</span>
        <volume-display id="my_db_level"></volume-display>
        <span>-12</span>
        <div class="bg_eq_num">
          <button class="magnify-div box-shadow" id="btn_gain">Gain/dB</button>
          <button class="magnify-div box-shadow" id="btn_freq">Freq</button>
          <button class="magnify-div box-shadow" id="btn_q">Q</button>
        </div>
      </div>
      <template id="eq_template">
        <div class="eq_item">
          <span class="eq_number">0</span>
          <input class="eq_slider" type="range" name="vol" min="0" max="50">
          <div class="bg_eq_num">
            <input type="number" class="eq_db_input" value="0" step="0.1">
            <input type="number" class="eq_freq_input" value="20" step="1">
            <input type="number" class="eq_q_input" value="0" step="0.1">
          </div>
        </div>
      </template>
    </div>

    <!-- 其他的一股脑设置 -->
    <div class="bg_gray_div" id="bg_other_div">
      <!-- 延迟设置 -->
      <div class="bg_gray_div bg_content" id="bg_delay">
        <div class="bg_title"><span class="my_title1">SPEAKER DELAY SETUP</span></div>
        <template id="horn_template">
          <div class="horn_item_div">
            <input type="number" placeholder="0" class="input-delay" step="0.1">
            <button class="horn-delay">
              <div class="ripple-container"></div>
              <img src="../resources/horn.png" />
            </button>
          </div>
        </template>

        <div class="my_content">
          <div id="bg_middle_delay">
            <div id="top_horn_div"></div>
            <div id="middle_horn_div">
              <div id="middle_horn_left_div"></div>
              <img src="../resources/car.png" alt="" class="auto-fit-img">
              <div id="middle_horn_right_div"></div>
            </div>
            <div id="bottom_horn_div"></div>
          </div>

          <div id="delay_type_div">
            <button class="gradient-button box-shadow" id="delay_ms_button">ms</button>
            <button class="gradient-button box-shadow" id="delay_cm_button">cm</button>
            <button class="gradient-button box-shadow" id="delay_inch_button">inch</button>
          </div>
        </div>
      </div>

      <!-- 通道设置 -->
      <div class="bg_gray_div bg_content" id="bg_channel">
        <div class="bg_title"> <span class="my_title1">DSP CHANNEL</span> </div>
        <div class="my_content">
          <div class="bg_ch_items group">
            <template id="template_group">
              <button class="btn_group box-shadow magnify-div"><img src="../resources/ble_off.png" /></button>
            </template>
          </div>
          <div class="bg_ch_items">
            <template id="template_ch">
              <div class="ch_item_div">
                <div class="ch_num box-shadow highlight-text half-radius click_div">CH1</div>
                <div class="ch_color"></div>
                <button class="pulldown_btn box-shadow highlight-text half-radius ch_custom">前左高频<img
                    src="../resources/pulldown.png" /></button>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!--  高通 -->
      <div id="bg_high_pass"></div>
      <!-- 低通 -->
      <div id="bg_low_pass"></div>

      <!--  高通 ｜ 低通 设置-->
      <template id="template_pass">
        <div class="bg_gray_div bg_content" id="bg_pass_item">
          <div class="bg_title">
            <span class="my_title1">HIGH PASS</span>
            <div class="bg_title2">
              <span>FREQ</span>
              <span>TYPE</span>
              <span>SLOPE</span>
            </div>
          </div>
          <div class="my_content">
            <div class="bg_ch_items">
              <template id="template_ch_pass">
                <div class="ch_pass_item_div box-shadow highlight-text half-radius">
                  <input type="number" value="20">
                  <button class="pass_type">BESSEL<img src="../resources/pulldown.png" /></button>
                  <button class="slope">24dB/Oct<img src="../resources/pulldown.png" /></button>
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>

      <!-- 正反向音量 -->
      <div class="bg_gray_div bg_content" id="bg_phase">
        <div class="bg_title">
          <span class="my_title1">PHASE & LEVEL</span>
          <div class="bg_title2">
            <span>PHASE</span>
            <span>CH LEVEL</span>
            <span>DB MUTE</span>
          </div>
        </div>
        <div class="my_content">
          <div class="bg_ch_items">
            <template id="template_ch_db">
              <div class="ch_db_item_div">
                <div class="ch_item_left_div  box-shadow highlight-text half-radius">
                  <button class="my_ch_phase">180°</button>
                  <input class="my_db_input" type="range" value="0" min="0" max="100">
                  <span>0</span>
                  <button class="ch_mute"><img class="auto-fit-img" src="../resources/turn_on.png" alt=""></button>
                </div>
                <div class="ch_color"></div>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- master level总音量 -->
      <div class="bg_gray_div bg_content" id="bg_master">
        <div class="bg_title"> <span class="my_title1">MASTER LEVEL</span></div>
        <div class="my_content">
          <div id="bg_master_top">
            <div class="master_scale" id="master_scale_left"></div>
            <div id="bg_master_slider">
              <div class="ticks"></div>
              <input type="range" id="verticalSlider" min="0" max="100" value="100">
            </div>
            <div class="master_scale" id="master_scale_right"></div>
          </div>
          <div id="bg_master_bottom">
            <div class="master_btn_item" id="bg_master_db">
              <span>DB</span>
              <button id="master_db">0</button>
            </div>
            <div class="master_btn_item" id="bg_master_mute">
              <span>MUTE</span>
              <button id="master_mute"><img src="../resources/turn_on.png" alt=""></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 滤波类型 -->
  <div id="pass-type-dropdown" class="dropdown-menu">
    <ul>
      <li><button>BESSEL</button></li>
      <li><button>BTR-W</button></li>
      <li><button>LINK-R</button></li>
    </ul>
  </div>

  <!-- SLOPE -->
  <div id="slope-dropdown" class="dropdown-menu">
    <ul>
      <li><button>6dB/Oct</button></li>
      <li><button>12dB/Oct</button></li>
      <li><button>24dB/Oct</button></li>
      <li><button>36dB/Oct</button></li>
      <li><button>48dB/Oct</button></li>
    </ul>
  </div>

  <!-- 前后中置，超低环绕，天空音 下拉框 -->
  <div id="ch-setup-dropdown" class="dropdown-menu">
    <ul>
      <li><button>空</button></li>
      <li><button>前置<img src="" alt=""></button></li>
      <li><button>后置<img src="" alt=""></button></li>
      <li><button>中置<img src="" alt=""></button></li>
      <li><button>顶置<img src="" alt=""></button></li>
      <li><button>超低<img src="" alt=""></button></li>
      <li><button>环绕<img src="" alt=""></button></li>
    </ul>
  </div>

  <!-- 高低中频率 下拉框-->
  <div id="ch-setup-dropleft" class="dropdown-menu">
    <ul id="dropdown-menu-container">
    </ul>
  </div>

  <!-- save 下拉框 -->
  <div id="save-dropdown" class="dropdown-menu">
    <ul>
      <li><button>Save to File</button></li>
      <!-- <li><button>Save to Device<img src="" alt=""></button></li> -->
    </ul>
  </div>

  <!-- load 下拉框 -->
  <div id="load-dropdown" class="dropdown-menu">
    <ul>
      <li><button>Load from File</button></li>
      <li><button>Load from Present<img src="" alt=""></button></li>
    </ul>
  </div>

  <!-- resetEQ 下拉框 -->
  <div id="reset-dropdown" class="dropdown-menu">
    <ul>
      <li><button>Reset Channel</button></li>
      <li><button>Reset All EQ</button></li>
    </ul>
  </div>

  <!-- 右上角设置按钮 下拉框 -->
  <div id="setting-dropdown" class="dropdown-menu">
    <ul>
      <li><button>中文</button></li>
      <li><button>Firmware Update</button></li>
    </ul>
  </div>

  <!-- Preset 侧边弹框 -->
  <div id="preset-dropleft" class="dropdown-menu">
    <ul>
      <li><button>Preset1</button></li>
      <li><button>Preset2</button></li>
      <li><button>Preset3</button></li>
      <li><button>Preset4</button></li>
      <li><button>Preset5</button></li>
      <li><button>Preset6</button></li>
    </ul>
  </div>

  <!-- 噪门控制 侧边弹框 -->
  <div id="noise-dropdown" class="dropdown-menu">
    <ul>
      <li><button>close</button></li>
      <li><button>level1</button></li>
      <li><button>level2</button></li>
      <li><button>level3</button></li>
      <li><button>level4</button></li>
      <li><button>level5</button></li>
      <li><button>level6</button></li>
      <li><button>level7</button></li>
      <li><button>level8</button></li>
    </ul>
  </div>

  <!-- 合频下拉框 -->
  <div id="sum-dropdown" class="dropdown-menu">
    <ul>
    </ul>
  </div>

  <!-- 通道合频弹窗 -->
  <div class="ml_message">
    <div id="channel_setup_alert" class="bg_gray_div" style="border-radius: 10px;">
      <span style="margin-top: 10px;">CHANNEL SETUP</span>
      <button id="alert_cancel"
        style="position: absolute; top: 5px; right: 10px; border: none; border-radius: 999px; width: 30px; height: 30px; padding: 0;">
        <img src="../resources/cancel.png" alt="" style="max-width: 100%; max-height: 100%;">
      </button>
      <div class="sum_title_div">
        <span>MAIN</span>
        <!-- <span id="input_type" style="font-size: 12px;">INPUT TYPE</span> -->
        <span>SECONDARY</span>
      </div>
      <!-- 信号源 -->
      <div class="sum_source_div">
        <ul>
          <li><a href="#" class="nav_a box-shadow grey-border alert-gradient-bg " id="sum_main"><span
                class="label">Hi.level</span><img src="../resources/arrow_down.png" class="icon_arrow" /></a>
          </li>
          <!-- <li><a href="#" class="nav_a magnify-div box-shadow grey-border alert-gradient-bg" id="sum_digital"><span
                class="label">BT/USB</span></a>
          </li> -->
          <li><a href="#" class="nav_a box-shadow grey-border alert-gradient-bg " id="sum_secondary"><span
                class="label">Off</span><img src="../resources/arrow_down.png" class="icon_arrow" /></a>
          </li>
        </ul>
      </div>
      <span style="font-size: 12px;">OUTPUT SELECT</span>
      <!-- 输出通道选择 -->
      <div id="sum_grid">
        <template id="sum_template">
          <div class="sum_item_container">
            <div class="sum_item magnify-div gradient-button box-shadow grey-border alert-gradient-bg"></div>
            <div class="sum_ch_name">CH1</div>
          </div>
        </template>
      </div>
      <span style="font-size: 12px;">INPUT SELECT</span>
      <!-- 输入通道选择模式 1 -->
      <div id="sum_l_r_div" class="grey-border alert-gradient-bg" style="display: none;">
        <label class="sum_l_r_item" for="sum_l"><input type="checkbox" id="sum_l" value="L" name="sum">L</label>
        <label class="sum_l_r_item" for="sum_r"><input type="checkbox" id="sum_r" value="R" name="sum">R</label>
      </div>
      <!-- 输入通道选择模式 2 -->
      <div id="sum_input_div" style="display: none;">
        <div id="sum_input_mode">
          <ul>
            <li><a href="#" class="nav_a magnify-div box-shadow grey-border alert-gradient-bg" id="sum_2_ch"><span
                  class="label">2-CH</span></a>
            </li>
            <li><a href="#" class="nav_a magnify-div box-shadow grey-border alert-gradient-bg" id="sum_4_ch"><span
                  class="label">4-CH</span></a>
            </li>
            <li><a href="#" class="nav_a magnify-div box-shadow grey-border alert-gradient-bg " id="sum_6_ch"><span
                  class="label">6-CH</span></a>
            </li>
            <li><a href="#" class="nav_a magnify-div box-shadow grey-border alert-gradient-bg " id="sum_sum"><span
                  class="label">SUM</span></a>
            </li>
            <li><a href="#" class="nav_a magnify-div box-shadow grey-border alert-gradient-bg " id="sum_custom"><span
                  class="label">CUSTOMSUM</span></a>
            </li>
          </ul>
        </div>
        <div id="sum_input_select" class="grey-border alert-gradient-bg">
          <template id="sum_input_select_template">
            <label class="sum_l_r_item" for="sum_l"><input type="checkbox" id="sum_l" value="L" name="sum">L</label>
          </template>
        </div>
      </div>
      <button class="magnify-div box-shadow grey-border alert-gradient-bg half-radius gradient-button" id="sum_reset"
        style="width: 300px; height: 30px;">
        RESET
      </button>
    </div>
  </div>


  <script type="module" src="../js/index.js"></script>
  <!-- loadCustom({ selector: '[data-db]', defaultPath: 'db.html' });
  loadCustom({ selector: '[delay-input]', defaultPath: 'delay_input.html', });
  loadCustom({ selector: '[delay-horn]', defaultPath: 'horn_button.html' }); -->
  </script>
</body>

</html>